<script>
import { unique } from './util'

export default {
  name: 'UiToolbarItem',
  inject: ['UiToolbar'],
  props: {
    position: {
      type: String,
      default: 'left',
      validator(value) {
        return ['left', 'right'].indexOf(value) >= 0
      }
    },
    divided: {
      type: Boolean,
      default: false
    },
    show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      info: {
        count: 0
      }
    }
  },
  computed: {
    item() {
      return {
        id: this.id,
        props: this.$props,
        info: this.info,
        render: () => {
          return this.$scopedSlots.default && this.$scopedSlots.default()
        }
      }
    }
  },
  created() {
    this.id = unique()
    this.UiToolbar.addItem(this.item)
  },
  beforeDestroy() {
    this.UiToolbar.removeItem(this.id)
  },
  updated() {
    this.info.count++
  },
  render() {
    return null
  }
}
</script>
